<template>
    <el-drawer title="偏差" size="500px" :close-on-click-modal="false" v-if="dialogVisible" direction="rtl"
        @close="handleCloseDialog" :visible="dialogVisible">
        <el-form class="devition-form" :model="ruleForm" :rules="rules" ref="ruleForm" style="width: 400px"
            label-width="140px" :disabled="disable">
            <el-form-item label="偏差名称" prop="name">
                <el-input type="text" v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="偏差编号" prop="deviation_no">
                <el-input type="text" v-model="ruleForm.deviation_no"></el-input>
            </el-form-item>
            <el-form-item label="偏差日期" prop="deviation_time">
                <!-- <el-input type="text" v-model="ruleForm.deviation_time"></el-input> -->
                <el-date-picker v-model="ruleForm.deviation_time" type="datetime" placeholder="选择日期时间"
                    value-format="timestamp">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="原因分析" prop="analyze_cause">
                <el-input type="text" v-model="ruleForm.analyze_cause"></el-input>
            </el-form-item>
            <el-form-item label="处理结果" prop="handle_result">
                <el-input type="text" v-model="ruleForm.handle_result"></el-input>
            </el-form-item>
            <el-form-item label="防范措施" prop="preventive_measures">
                <el-input type="text" v-model="ruleForm.preventive_measures"></el-input>
            </el-form-item>
        </el-form>
        <div class="dialog-footer" style="text-align: center;padding-top: 20px;">
            <el-button @click="handleCloseDialog">取 消</el-button>
            <el-button type="primary" @click="handleClickSubmit">确 定</el-button>
        </div>
    </el-drawer>
</template>

<script>
import { DeviationCreate, DeviationDetail, DeviationUpdate } from '@/api/qms.js';
import { timestamp10 } from "@/utils/mUtils";

export default {
    name: 'deviation',
    components: {},
    props: ['dialogVisible', 'mode', 'id'],
    data() {
        return {
            ruleForm: {
                name: '', // 偏差名称
                deviation_no: '', // 偏差编号
                deviation_time: '', // 偏差日期
                analyze_cause: '', // 原因分析
                handle_result: '', // 处理结果
                preventive_measures: '' // 防范措施

            },
            rules: {
                name: [
                    { required: true, message: '请输入偏差名称', trigger: 'blur' }
                ],
                deviation_no: [
                    { required: true, message: '请输入偏差编号', trigger: 'blur' }
                ],
                deviation_time: [
                    { required: true, message: '请选择偏差日期', trigger: 'change' }
                ],
                analyze_cause: [
                    { required: true, message: '请输入原因分析', trigger: 'blur' }
                ],
                handle_result: [
                    { required: true, message: '请输入处理结果', trigger: 'blur' }
                ],
                preventive_measures: [
                    { required: true, message: '请输入防范措施', trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        disable() {
            return this.mode === 'detail';
        },
    },
    mounted() {
        if (this.mode === 'edit' || this.mode === 'detail') {
            this.getDetail();
        }
    },
    methods: {
        handleCloseDialog() {
            this.$emit('close');
        },

        getDetail() {
            DeviationDetail({
                id: this.id
            }).then(res => {
                const data = res.data||{};
                data.deviation_time = data.deviation_time * 1000 || '';
                this.ruleForm = data;
            });
        },
        handleClickSubmit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (!valid) return;
                let _ruleForm = {
                    ...this.ruleForm,
                    deviation_time: timestamp10(this.ruleForm.deviation_time),
                };
                if (this.mode === 'add') {
                    DeviationCreate(_ruleForm).then(res => {
                        if (res.code === 10000) {
                            this.$message({
                                message: "新建成功",
                                type: "success",
                            });
                            this.$emit('close', true);
                        }
                    });
                } else {
                    DeviationUpdate(_ruleForm).then(res => {
                        if (res.code === 10000) {
                            this.$message({
                                message: "修改成功",
                                type: "success",
                            });
                            this.$emit('close', true);
                        }
                    });
                }
            });
        }


    },
};
</script>
<style lang="scss" scoped>
.wrapper {
    .devition-form {
        .el-input {
            width: 200px;
        }

        .el-select,
        .el-cascader,
        .el-radio-group {
            width: 200px;
        }

        .el-textarea {
            width: 400px
        }

        /deep/ .el-form-item {
            margin-right: 30px !important;
        }
    }
}
</style>